<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>充值</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <link href="${pageContext.request.contextPath}/static/css/common.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/layer/skin/layer.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/css/bootstrap.min.css"
          rel="stylesheet">
          <link href="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/css/select2.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/font-awesome-4.3.0/css/font-awesome.min.css"
          rel="stylesheet">
          <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/jquery.time/jquery.timepicker.min.css">
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="/static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/layer/layer.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/js/select2.min.js"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/My97DatePicker/WdatePicker.js"
        type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/jquery.time/jquery.timepicker.min.js"
        type="text/javascript"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/global.js"></script>
	<style type="text/css">
	h3,ol,li{margin:0;padding:0;}
	.wraper{
		padding:0px 0px;
	}
	.content{
		padding:20px 3%;
	}
	.col-md-1{
		text-align:right;
	}
	.btn{
		width:120px;
		}
	.content .row{
		padding:10px 0;
	}
	.box{
		margin:10px 0;
		
	}
	.box ol{
		padding-left:14px;
		line-height:20px;
	}
	.txt{
		color:#000;
		font-size:16px;
		width:200px;
		text-align:right;
		padding-right:20px;
	}
	 input{
	   display:inline-block;
	   height:30px;
	   line-height:30px;
	   width:400px;
	   border:1px solid #ccc;
	   border-radius:4px;
	   padding:0 10px;
	}
	.titles{
		font-size:20px;
		*+font-size:18px;
		color:#333;
		overflow:hidden;
		width:100%;
		padding:5px 20px;
		background:#f8f8f8;
	}
	.titles .span1{
		float: left;
	}
	.titles .span2{
		float:right;
	}
	.wraper .btn-info{
		background:#228ded;
		border-color:#228ded;
		width:155px;
		height:36px;
		font-size:20px !important;
		line-height:36px;
		padding:0;
		*+line-height:15px;
		outline:none;
	}
	.lt{
	  float:left;
	}
	.clearfix{
		overflow:hidden;
	}
	.txt select{
		
	}
	#yzm{
		position: relative;
	    left: -10px;
	    border-radius: 0 4px 4px 0;
	    *+left:0;
	    *+line-height:20px;
	}
	</style>
<body>
<div class="wraper">
 	 <div class="titles"> 
	 	 <div class="span1">添加银行卡</div> 
	 	 <div class="span2">x</div>
 	 </div>
	 <div class="content"> 
	 	<form action="">
			 	<div class="clearfix box">
			 		<div class="lt txt">银行卡号：</div><input type="text" class="lt"  placeholder="输入银行卡号"/>
			 	</div>
			 	<div class="clearfix box">
			 		<div class="lt txt">银行卡类型：</div><input type="text" class="lt"/>
			 	</div>
			 	<div class="clearfix box">
			 		<div class="lt txt">持卡人姓名：</div><input type="text" class="lt"  placeholder="输入持卡人姓名"/>
			 	</div>
			 	<div class="clearfix box">
			 		<div class="lt txt">开户地区：</div>
			 		<select id="bank">
			 			<option>开户银行</option>
			 		</select>
			 		<select id="pro">
			 			<option>省/市</option>
			 		</select>
			 		<select id="city">
			 			<option>城市</option>
			 		</select>
			 	</div>
			 	<div class="clearfix box">
			 		<div class="lt txt">开户行名称：</div>
			 		<select id="bankname">
			 			<option>开户银行</option>
			 		</select>
			 		
			 	</div>
			 	<div class="clearfix box">
			 		<div class="lt txt">身份证号码：</div><input type="text" class="lt"  placeholder="输入身份证号"/>
			 	</div>
			 	<div class="clearfix box">
			 		<div class="lt txt">银行预留手机：</div><input type="text" class="lt"   placeholder="输入银行预留手机号"/>
			 	</div>
			 	<div class="clearfix box">
			 		<div class="lt txt">短信验证码：</div><input type="text" class="lt" disabled id="y_box"  placeholder="输入短信验证码" style="width:150px;"/>
			 		<input type="button" id="yzm" value="获取验证码" onclick="getNumber(this)" style="width:150px;border-color:#ffbee0;color:#e00078 !important;background:#fcedf2 !important;"/>
			 	</div>
			 	<input class="btn btn-info" value="确定" style="margin-left:150px;margin-top:20px;*+line-height:34px;"/>
	 	</form>
	 </div>
</div>
<script type="text/javascript">
	function getNumber(thisbtn){
		var nums=60,tim="";
		var btn=thisbtn;
		btn.disabled=true;
		btn.value=nums+"秒后重试";
		var y_box=document.getElementById("y_box");
		y_box.removeAttribute("disabled");
		y_box.focus();
		tim=setInterval(del, 1000);
		function del(){
			nums--;
			if(nums>0){
				
				btn.value=nums+"秒后重试";
			}else{
				clearInterval(tim);
				btn.disabled=false;
				btn.value="获取验证码";
				nums=10;
			}
		}
	}
	$("#bank").select2({
		"placeholder":"开户银行",
		"width":160,
		"minimumResultsForSearch": -1
	});
	$("#pro").select2({
		"placeholder":"省/市",
		"width":160,
		"minimumResultsForSearch": -1
	});
	$("#city").select2({
		"placeholder":"城市",
		"width":160,
		"minimumResultsForSearch": -1
	});
	$("#bankname").select2({
		"placeholder":"分行地址",
		"width":450,
		"minimumResultsForSearch": -1
	});
</script>
</body>
</html>
